<script>
import { GlIcon, GlBadge, GlButton, GlLink, GlSprintf, GlTooltipDirective } from '@gitlab/ui';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { issuableStatusText, STATUS_OPEN, STATUS_REOPENED } from '~/issues/constants';
import { isExternal } from '~/lib/utils/url_utility';
import { __, n__, sprintf } from '~/locale';
import ConfidentialityBadge from '~/vue_shared/components/confidentiality_badge.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue';

export default {
  components: {
    ConfidentialityBadge,
    GlIcon,
    GlBadge,
    GlButton,
    GlLink,
    GlSprintf,
    TimeAgoTooltip,
    WorkItemTypeIcon,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    createdAt: {
      type: String,
      required: true,
    },
    author: {
      type: Object,
      required: true,
    },
    issuableState: {
      type: String,
      required: false,
      default: '',
    },
    statusIcon: {
      type: String,
      required: false,
      default: '',
    },
    statusIconClass: {
      type: String,
      required: false,
      default: '',
    },
    blocked: {
      type: Boolean,
      required: false,
      default: false,
    },
    confidential: {
      type: Boolean,
      required: false,
      default: false,
    },
    isFirstContribution: {
      type: Boolean,
      required: false,
      default: false,
    },
    isHidden: {
      type: Boolean,
      required: false,
      default: false,
    },
    issuableType: {
      type: String,
      required: false,
      default: '',
    },
    serviceDeskReplyTo: {
      type: String,
      required: false,
      default: '',
    },
    showWorkItemTypeIcon: {
      type: Boolean,
      required: false,
      default: false,
    },
    taskCompletionStatus: {
      type: Object,
      required: false,
      default: null,
    },
    workspaceType: {
      type: String,
      required: false,
      default: '',
    },
  },
  computed: {
    badgeText() {
      return issuableStatusText[this.issuableState];
    },
    badgeVariant() {
      return this.issuableState === STATUS_OPEN || this.issuableState === STATUS_REOPENED
        ? 'success'
        : 'info';
    },
    blockedTooltip() {
      return sprintf(__('This %{issuable} is locked. Only project members can comment.'), {
        issuable: this.issuableType,
      });
    },
    hiddenTooltip() {
      return sprintf(__('This %{issuable} is hidden because its author has been banned'), {
        issuable: this.issuableType,
      });
    },
    shouldShowWorkItemTypeIcon() {
      return this.showWorkItemTypeIcon && this.issuableType;
    },
    createdMessage() {
      if (this.serviceDeskReplyTo) {
        return this.shouldShowWorkItemTypeIcon
          ? __('created %{timeAgo} by %{email} via %{author}')
          : __('Created %{timeAgo} by %{email} via %{author}');
      }
      return this.shouldShowWorkItemTypeIcon
        ? __('created %{timeAgo} by %{author}')
        : __('Created %{timeAgo} by %{author}');
    },
    authorId() {
      return getIdFromGraphQLId(`${this.author.id}`);
    },
    isAuthorExternal() {
      return isExternal(this.author.webUrl ?? '');
    },
    taskStatusString() {
      const { count, completedCount } = this.taskCompletionStatus;

      return sprintf(
        n__(
          '%{completedCount} of %{count} checklist item completed',
          '%{completedCount} of %{count} checklist items completed',
          count,
        ),
        { completedCount, count },
      );
    },
    hasTasks() {
      return this.taskCompletionStatus.count > 0;
    },
  },
  mounted() {
    this.toggleSidebarButtonEl = document.querySelector('.js-toggle-right-sidebar-button');
  },
  methods: {
    handleRightSidebarToggleClick() {
      this.$emit('toggle');
      if (this.toggleSidebarButtonEl) {
        this.toggleSidebarButtonEl.dispatchEvent(new Event('click'));
      }
    },
  },
};
</script>

<template>
  <div class="detail-page-header gl-flex-direction-column gl-sm-flex-direction-row">
    <div class="detail-page-header-body gl-flex-wrap">
      <gl-badge class="gl-mr-2" :variant="badgeVariant">
        <gl-icon v-if="statusIcon" :name="statusIcon" :class="statusIconClass" />
        <span class="gl-display-none gl-sm-display-block" :class="{ 'gl-ml-2': statusIcon }">
          <slot name="status-badge">{{ badgeText }}</slot>
        </span>
      </gl-badge>
      <confidentiality-badge
        v-if="confidential"
        :issuable-type="issuableType"
        :workspace-type="workspaceType"
      />
      <span v-if="blocked" class="issuable-warning-icon">
        <gl-icon
          v-gl-tooltip.bottom
          name="lock"
          :title="blockedTooltip"
          :aria-label="__('Blocked')"
        />
      </span>
      <span v-if="isHidden" class="issuable-warning-icon">
        <gl-icon
          v-gl-tooltip.bottom
          name="spam"
          :title="hiddenTooltip"
          :aria-label="__('Hidden')"
        />
      </span>
      <work-item-type-icon
        v-if="shouldShowWorkItemTypeIcon"
        show-text
        :work-item-type="issuableType.toUpperCase()"
      />
      <gl-sprintf :message="createdMessage">
        <template #timeAgo>
          <time-ago-tooltip class="gl-mx-2" :time="createdAt" />
        </template>
        <template #email>
          {{ serviceDeskReplyTo }}
        </template>
        <template #author>
          <gl-link
            class="gl-font-weight-bold gl-mx-2 js-user-link"
            :href="author.webUrl"
            :data-user-id="authorId"
          >
            <span :class="[{ 'gl-display-none': !isAuthorExternal }, 'gl-sm-display-inline']">
              {{ author.name }}
            </span>
            <gl-icon
              v-if="isAuthorExternal"
              name="external-link"
              :aria-label="__('external link')"
            />
            <strong v-if="author.username" class="author gl-display-inline gl-sm-display-none!"
              >@{{ author.username }}</strong
            >
          </gl-link>
        </template>
      </gl-sprintf>
      <gl-icon
        v-if="isFirstContribution"
        v-gl-tooltip
        class="gl-mr-2"
        name="first-contribution"
        :title="__('1st contribution!')"
        :aria-label="__('1st contribution!')"
      />
      <span
        v-if="taskCompletionStatus && hasTasks"
        class="gl-display-none gl-md-display-block gl-lg-display-inline-block"
        >{{ taskStatusString }}</span
      >
      <gl-button
        icon="chevron-double-lg-left"
        class="gl-ml-auto gl-display-block gl-sm-display-none! js-sidebar-toggle"
        :aria-label="__('Expand sidebar')"
        @click="handleRightSidebarToggleClick"
      />
    </div>
    <div class="detail-page-header-actions gl-display-flex">
      <slot name="header-actions"></slot>
    </div>
  </div>
</template>
